<!DOCTYPE html>
<html>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script charset="UTF-8" src="https://ehome.szwistar.com/common/js/utils.js" type="text/javascript">
</script>
<script charset="UTF-8" src="https://ehome.szwistar.com/common/js/wskt.js" type="text/javascript">
</script>
<style>
    html,body{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background-color: yellow;
    }
</style>

<head>
    <title></title>
</head>

<body>
    <div id="map" style="width: 100%;height: 100%;">
    </div>
    <div id="sContent" style="display: none;">
        <h4>
            探秘
        </h4>
        <!-- <img alt="" id="imgDemo" src="../../build/logo.png"> -->
        <p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">
            天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...
        </p>
        </img>
    </div>
    <script type="text/javascript">
    // 重定向日志到页面上，以便调试
    // console.log = function(message) {
    //     txtlog.value += message + '\r\n';
    // };

    let addr = "ws://localhost:8504/webskt";
    let skt;
    let map;
    let marker;

    let eventHandlers = {
        onOpen: function() {
            console.log("连接已建立！");
            alert("连接已建立！")
            window.createMap();
        },
        onClose: function() {
            console.log("连接已断开！");
            alert("连接已断开！")
        },
        onError: function(message) {
            console.log(message);
            alert(message)
        },
        onMessage: function(message) {
            console.log(message.data);
            alert(message)
        },
    }

    function openws() {
        alert(addr);
        try {
            skt = wskt.open(addr, eventHandlers);
        } catch (err) {
            alert(err);
        }

    }

    function createMap() {
        // 百度地图API功能
        let map = new BMap.Map("map"); // 创建Map实例
        map.addEventListener('click', function(e) {
            alert(e.point.lng + "," + e.point.lat);
        })
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]
        }));
        marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // //创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        let infoWindow = new BMap.InfoWindow(document.getElementById('sContent')); // 创建信息窗口对象
        // 随机向地图添加25个标注
        let bounds = map.getBounds();
        let sw = bounds.getSouthWest();
        let ne = bounds.getNorthEast();
        let lngSpan = Math.abs(sw.lng - ne.lng);
        let latSpan = Math.abs(ne.lat - sw.lat);
        for (let i = 0; i < 25; i++) {
            let point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
            addMarker(map, point, infoWindow);
        }
    }

    function addMarker(map, point, infoWindow) {
        let marker = new BMap.Marker(point);
        map.addOverlay(marker);
        marker.addEventListener("click", function() {
            console.log(this.$c);
            let p = this.getPosition(); //获取marker的位置
            this.openInfoWindow(infoWindow);
            document.getElementById('sContent').style.display = "block";
            //图片加载完毕重绘infowindow
            document.getElementById('imgDemo').onload = function() {
                infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
            }
            console.log("marker的位置是" + p.lng + "," + p.lat);
        });
    }

    // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，
    // 防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function() {
        if (skt) {
            skt.close();
            skt = null;
        }
    }

    window.onload = function() {
        alert("windows load")
        openws();
        // createMap();
    }
    </script>
    <script src="//api.map.baidu.com/api?v=3.0&ak=OkRYjXVMKbNiKUzoGkjPPbQspF5smh76" type="text/javascript">
    </script>
</body>

</html>